<template>
  <el-card>
    <el-row :gutter="20" class="header">
      <el-col :span="6">
        <el-card>
          <p>独生子女数量:{{ childNum }}</p>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <p>城市户口学生数量:{{ cityNum }}</p>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <p>已成年学生数量:{{ ageNum }}</p>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <p>已接种新冠疫苗人数:{{ vaccineNum }}</p>
        </el-card>
      </el-col>
    </el-row>

    <el-card style="margin-top:20px;">
      <el-row>
        <el-button type="success" @click="updataShow()">新增学生</el-button>
        <el-button type="warning" @click="handleDelete('check')">删除选中</el-button>
        <el-button type="danger" @click="handleDelete('all')">删除全部</el-button>
      </el-row>
      <el-table :data="tableData" border style="width: 100%;margin-top:20px" @selection-change="checkArr">
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="100" align="center">
        </el-table-column>
        <el-table-column prop="age" label="年龄" width="60" align="center">
        </el-table-column>
        <el-table-column prop="child" label="是否独生" width="120" align="center">
          <template slot-scope="scope">
            {{ scope.row.child === "1" ? "独生子女" : "非独生" }}
          </template>
        </el-table-column>
        <el-table-column prop="account" label="户口类型" width="120" align="center">
          <template slot-scope="scope">
            {{ scope.row.account === "1" ? "城市户口" : "农村户口" }}
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机" width="120" align="center">
        </el-table-column>
        <el-table-column prop="identity" label="身份证" width="180" align="center">
        </el-table-column>
        <el-table-column prop="address" label="地址" align="center">
        </el-table-column>
        <el-table-column prop="vaccine" label="新冠疫苗" width="120" align="center">
          <template slot-scope="scope">
            {{ scope.row.vaccine === "1" ? "已接种" : "未接种" }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
            <el-button size="mini" @click="updataShow(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <Data ref="dataShow" v-if="dataShow" @close="onClose"></Data>
  </el-card>
</template>

<script>
import Data from '@/components/data.vue'
import { mapGetters, mapState, mapMutations } from 'vuex'
export default {
  name: 'App',
  /**
  * 定义组件的data函数，用于声明组件内部的状态。
  * 
  * @returns {Object} 返回一个对象，其中包含组件内部的状态。这些状态将在组件的生命周期内被管理和使用。
  */
  data() {
    return {
      dataShow: false,
      allCheckData: [],
    }
  },
  components: {
    Data,
  },
  computed: {
    ...mapGetters(['cityNum', 'childNum', 'ageNum', 'vaccineNum']),
    ...mapState(['tableData'])
  },
  methods: {
    updataShow(row) {
      this.dataShow = true;
      this.$nextTick(() => {
        this.$refs.dataShow.show(row)
      })
    },
    onClose() {
      this.dataShow = false;
    },
    ...mapMutations(['deleteTableData']),
    handleDelete(type) {
      // if (type === 'check' && this.allCheckData.length === 0) {
      //   console.log('adaefqwefqwefqwef');
      //   this.$alert('这是一段内容', '标题名称', {
      //     confirmButtonText: '确定',
      //     callback: action => {
      //       this.$message({
      //         type: 'info',
      //         message: `action: ${action}`
      //       });
      //       // return
      //     }
      //   });
      // }
      this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // console.log('type', type);
        let arr = []
        if (type === 'all') {
          arr = this.tableData.map(item => item.id)
        } else if (type === 'check') {
          // console.log('check');
          arr = this.allCheckData
          console.log('arr', arr);
        } else {
          arr = [type]
        }
        this.deleteTableData(arr)


        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    checkArr(data) {
      this.allCheckData = data.map(item => item.id)
    }
  }
}


</script>

<style scoped>
.header p {
  margin: 10px 0;
}
</style>